<script setup>
import {
  NH3, NButton,
  NFlex, NCard

} from 'naive-ui'

import { ref } from 'vue'

const model_list = ref([
  {
    label: '🗺️生源图谱',
    discription: '按省份/地市查看学生来源分布与排名',
    value: 'student-source-map'
  },
  {
    label: '👫性别统计',
    discription: '各省、地市及学院男女比例可视化',
    value: 'gender-statistics'
  },
  {
    label: '🧑‍🎓学生统计',
    discription: '各学院各年级学生数量与占比分析',
    value: 'student-overview'
  },
  {
    label: '🍴餐厅学生消费趋势统计',
    discription: '一卡通消费按年级、性别、地域的多维度趋势',
    value: 'canteen-consumption'
  },
  {
    label: '📈学霸指数图谱',
    discription: '基于学习数据计算的学霸指数与 TOP10 榜单',
    value: 'study-score-map'
  },
  {
    label: '🔍招生信息',
    discription: '各省、地市及留学生招生计划地图与数据视图',
    value: 'enrollment-info'
  },
  {
    label: '📊就业信息',
    discription: '就业地域分布与岗位性质（行政/企业/事业/升学/未就业）统计',
    value: 'employment-statistics'
  }
])


</script>

<template>
  <main>
    <NH3 style="margin: 0px;">🤗欢迎使用校园数据展示与分析平台</NH3>
    <p>请选择你要查看的模块</p>
    <n-flex vertical>
      <n-card v-for="item in model_list" :key="item.value" style="margin: 10px 0;" hoverable
        @click="$router.push({ name: item.value })">
        <template #header>
          <span>{{ item.label }}</span>
        </template>
        {{ item.discription }}
        <!-- <template #footer>
            <n-button type="primary" @click="$router.push({ name: item.value })">进入</n-button>
          </template> -->
      </n-card>
    </n-flex>


  </main>
</template>
